<template>
  <div id='memberlevel'>
    <keep-alive>
      <VipLevelInfo></VipLevelInfo>
    </keep-alive>
    <div class="showinfo">
      <div class="infotitle"><img :src="leftsrc" alt="">当前等级{{levelinfo.levelname}}可享福利</div>
      <div class="preferentialtext" v-for="(item, iil) in levelinfo.preferentialtext" :key="iil">
        <span :style="{backgroundColor: levelinfo.color }"></span>
        <p>{{item}}</p>
      </div>
    </div>
    <div class="showinfo" v-if="level + 1 !== 4">
      <div v-if="level + 1 !== 4" class="infotitle"><img :src="nextsrc" alt=""> 升级{{nextlevelinfo.levelname}}后可享福利</div>
      <div v-if="level + 1 === 4" class="infotitle"><img :src="nextsrc" alt=""> {{nextlevelinfo.levelname}}&nbsp专享福利</div>
      <div class="preferentialtext" v-for="(item, iil) in nextlevelinfo.preferentialtext" :key="iil">
        <span :style="{backgroundColor: nextlevelinfo.color }"></span>
        <p>{{item}}</p>
      </div>
    </div>
    <p class="tiptxt">提示：使用积分不影响等级，参与指定活动可快速升级</p>
    <div class="morelevel">
      <a href="javascript:;" @click="routeto('leveldetai')">查看等级规则</a>
    </div>
  </div>
</template>

<script>
import VipLevelInfo from '@/components/userlevel/VipLevelInfo'

export default {
  name: 'memberlevel',
  components: {
    VipLevelInfo
  },
  data () {
    return {
      level: 0,
      levelinfo: '',
      nextlevelinfo: '',
      leftsrc: '',
      nextsrc: ''
    }
  },
  created () {
    // 获取等级
    this.$axios.post(this.apidomain + '/api/cust/queryCustVipLevel/' + this.getCookie('appid'), {
      wxOpenId: this.getCookie('openid')
    })
    .then((response) => {
      this.getObjDetail('./static/json/level/vippreferential.json').then((data) => {
        this.level = parseInt(response.data.data.vip) - 1
        console.log(data.levelthemes)
        this.levelinfo = data.levelthemes[parseInt(response.data.data.vip) - 1]
        if (parseInt(response.data.data.vip) !== 4) {
          this.nextlevelinfo = data.levelthemes[parseInt(response.data.data.vip)]
        }
        this.leftsrc = parseInt(response.data.data.vip) > 0 ? './static/images/userlevel-pic(' + parseInt(response.data.data.vip) + ').png' : ''
        this.nextsrc = parseInt(response.data.data.vip) > 0 ? './static/images/userlevel-pic(' + (parseInt(response.data.data.vip) + 1) + ').png' : ''
      }, () => {})
    })
    .catch((error) => {
      console.log(error)
    })
  },
  methods: {
  }
}
</script>

<style lang="less">
@import '../assets/less/userlevel/vipdetail.less';
</style>
